<template>
  <!-- 代销募集资金划转 -->
  <div class="FundsTransfer">
    <!-- 表单 -->
    <div class="content">
      <el-form :inline="true" :model="form" class="demo-form-inline">
        <el-form-item label="文件名称" class="name">
          <el-input v-model="form.name" placeholder="请输入文件名称"></el-input>
        </el-form-item>
        <el-form-item label="产品名称">
          <el-input v-model="form.fileName" placeholder="请输入产品名称"></el-input>
        </el-form-item>
        <el-form-item label="执行状态">
          <el-select v-model="form.region" placeholder="请选择执行状态">
            <el-option label="待审核" value="1"></el-option>
            <el-option label="已发起" value="2"></el-option>
            <el-option label="已完成" value="3"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" class="size">查询</el-button>
          <el-button class="yellow" @click="reset()">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <!-- 新增和删除 -->
    <div class="btnGroup">
      <el-button
        v-for="(item, index) in btnData"
        :key="index"
        :type="item.type"
        :disabled="item.disabled ? true : false"
        :icon="item.icon"
        size="small"
        @click="handleClick(item.eventName)"
      >{{ item.text }}</el-button>
    </div>
    <!-- 表格数据 -->
    <div class="tableData">
      <el-table :data="tableData" stripe style="width: 100%">
        <el-table-column
          v-if="selectionObj"
          :type="selectionObj.type"
          :width="selectionObj.width || 50"
        ></el-table-column>
        <template v-for="item in headerData">
          <el-table-column
            v-if="item.prop === 'state'"
            :key="item.prop"
            :sortable="item.sortable"
            :prop="item.prop"
            :label="item.label"
            :width="item.width || 0"
          >
            <template slot-scope="scope">
              <el-switch
                v-model="scope.row.state "
                @change="switchChange(scope.row)"
                active-color="#13ce66"
                inactive-color="#ff4949"
              ></el-switch>
            </template>
          </el-table-column>
          <template v-else>
            <el-table-column
              :key="item.prop"
              :sortable="item.sortable"
              :prop="item.prop"
              :label="item.label"
              :width="item.width || 0"
            >
              <template v-if="item.children && item.children.length > 0">
                <el-table-column
                  v-for="childItem in item.children"
                  :key="childItem.prop"
                  :sortable="childItem.sortable"
                  :prop="childItem.prop"
                  :label="childItem.label"
                  :width="childItem.width || 0"
                ></el-table-column>
              </template>
            </el-table-column>
          </template>
        </template>
        <el-table-column
          :fixed="operatingObj.fixed || false"
          label="操作"
          :width="operatingObj.width || ''"
        >
          <template slot-scope="scope">
            <el-button
              v-for="(item, index) in operatingObj.btnList"
              :key="index"
              @click="handClick(item.eventName, scope.row)"
              type="text"
              size="small"
            >{{ item.text }}</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination">
        <el-pagination
          background
          :page-size="10"
          layout="prev, pager, next"
          :total="headerData.length"
        ></el-pagination>
      </div>
    </div>
    <AddDialog :visible.sync="dialogVisible" :title="DialogTitle"></AddDialog>
    <deleteDialog :visible.sync="DeldialogVisible" :title="DelDialogTitle"></deleteDialog>
    <EaxeteDialog ref="EaxeteDialog"></EaxeteDialog>
  </div>
</template>

<script>
import AddDialog from './AddDialog'
import deleteDialog from './deleteDialog'
import EaxeteDialog from './EaxeteDialog'
export default {
  components: {
    AddDialog,
    deleteDialog,
    EaxeteDialog
  },
  data () {
    return {
      dialogVisible: false,
      DeldialogVisible: false,
      form: {
        name: '', // 文件名称
        fileName: '', // 产品名称
        region: '' // 执行状态
      },
      DialogTitle: '', // 新增和编辑的标题
      DelDialogTitle: '', // 删除的标题
      ExaDialogTitle: '', // 查看详情的标题
      // 新增和删除按钮
      btnData: [
        {
          icon: 'el-icon-plus',
          type: 'primary',
          text: '添加',
          disabled: false,
          eventName: 'add'
        },
        {
          icon: 'el-icon-delete',
          type: 'danger',
          text: '删除',
          eventName: 'delete'
        }
      ],
      // 表格数据
      // 表格数据
      headerData: [
        {
          prop: 'id',
          label: '文件编号',
          width: '180'
        },
        {
          prop: 'name',
          label: '文件名称',
          width: '180'
        },
        {
          prop: 'roles',
          label: '产品名称',
          width: '180'
        },
        {
          prop: 'status',
          label: '执行状态',
          sortable: true,
          width: '180'
        },
        {
          prop: 'createTime',
          sortable: true,
          label: '创建时间',
          width: '200'
        }
      ],
      tableData: [
        {
          id: '1',
          name: '刘一',
          roles: '用户管理岗',
          mobileNo: '15812345678',
          state: true,
          createTime: '2020-10-01 23:00:00',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 弄'
        },
        {
          id: '2',
          name: '陈二',
          roles: '产品管理岗',
          mobileNo: '15812345678',
          state: true,
          createTime: '2020-10-01 23:00:00',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 弄'
        },
        {
          id: '3',
          name: '张三',
          roles: '产品复核岗',
          mobileNo: '15812345678',
          state: true,
          createTime: '2020-10-01 23:00:00',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 弄'
        }
      ],
      selectionObj: {
        type: 'selection'
      },
      // 表格右边的固定栏操作
      operatingObj: {
        fixed: 'right',
        width: '150',
        btnList: [
          {
            text: '删除',
            eventName: 'delete'
          },
          {
            text: '修改',
            eventName: 'alter'
          },
          {
            text: '查看详情',
            eventName: 'examine'
          }
        ]
      }
    }
  },
  methods: {
    // 点击重置按钮清空搜索列表
    reset () {
      this.form = {
        name: '', // 文件名称
        fileName: '', // 产品名称
        region: '' // 执行状态
      }
    },
    // 点击button按钮,传入eventName,add为新增,delete为删除
    handleClick (eventName) {
      if (eventName === 'add') {
        this.dialogVisible = true
        this.DialogTitle = '新增划转'
      }
    },
    // 点击button按钮,传入eventName和整行数据,delete为删除,examine查看详情,alter修改
    handClick (name, row) {
      if (name === 'alter') {
        this.dialogVisible = true
        this.DialogTitle = '编辑划转'
      } else if (name === 'delete') {
        this.DeldialogVisible = true
        this.DelDialogTitle = '删除划转'
      } else if (name === 'examine') {
        // this.ExaDialogTitle = '查看划转'
        this.$refs.EaxeteDialog.dialogVisible = true
      }
    }
  }
}
</script>

<style scoped lang="less">
.FundsTransfer {
  .content {
    background: white;
    padding-top: 23px;
    margin-bottom: 10px;
    .name {
      margin-left: 33px;
    }
    .size {
      width: 117px;
      height: 40px;
      border-radius: 4px;
      background-color: rgba(32, 127, 253, 1);
      color: rgba(255, 255, 255, 1);
      font-size: 16px;
      text-align: center;
    }
    .yellow {
      width: 117px;
      height: 40px;
      border-radius: 4px;
      background-color: rgba(242, 229, 26, 1);
      color: rgba(255, 255, 255, 1);
      font-size: 16px;
      text-align: center;
      font-family: Roboto;
      border: 1px solid rgba(255, 255, 255, 0);
    }
  }
  .btnGroup {
    height: 60px;
    line-height: 60px;
    background: #fff;
    padding: 0 30px;
    margin-bottom: 10px;
  }
  .tableData {
    .pagination {
      margin-top: 10px;
      height: 50px;
      background: #fff;
      text-align: right;
      padding-top: 9px;
    }
  }
}
</style>
